import {Layout, Menu, Icon, Row, Col, Button, Dropdown, Modal} from 'antd';
import React, {Component} from 'react';
import logo from '../image/tt.jpg';
import {Link, Route, Switch} from 'react-router-dom';
import '../css/login.css';
import {config} from '../config';
import app from '../app';

import SiteOrders from './SiteOrder';//下家列表
const path = config.fPath;
const {SubMenu} = Menu;
const confirm = Modal.confirm;
const {Header, Content, Sider} = Layout;

class SiteHome extends Component {
    constructor(props) {
        super(props);
        this.state = {
            collapsed: false,
            key: '0',
            username: '',
            menuList: [],
            currentKey: path + '/sitehome/siteorder', //选中的菜单
        };
    }

    //左边菜单栏
    menuList = [
        {component: SiteOrders,menu_path:'/sitehomes/siteorder',menu_icon:'copy',menu_name:'订单管理',},
    ];

    render() {
        return (
            <span style={{height: '100%'}}>
                <Layout style={{height: '100%'}}>
                    <Sider width={200} style={{overflowY: 'auto',overflowX: 'hidden'}} className="hiddenScroll">
                             <span style={{
                                 display: 'inline-block',
                                 width: '200px',
                                 height: '80px',
                                 backgroundColor: 'white'
                             }}>
                                 <img width={'200px'} height={'80px'}
                                      style={{position: 'relative'}} src={logo} alt=""/>
                             </span>
                        <Menu mode="inline"
                              theme="dark"
                              selectedKeys={[this.state.currentKey]}
                              onClick={(item) => this.handleMenuClick(item)}>
                            {
                                this.menuList.map((item, index) => {
                                    return (
                                        <Menu.Item key={path + item.menu_path} rowKey={index}>
                                            <span>
                                                <Icon type={item.menu_icon}/>
                                                <span>{item.menu_name}</span>
                                            </span>
                                        </Menu.Item>
                                    )
                                })
                            }
                        </Menu>
                    </Sider>
                    <Layout>
                        <Header
                            style={{color: 'white', backgroundColor: '#404040', height: '80px', lineHeight: '80px'}}>
                            <Row>
                                <Col span={24}
                                     style={{display: 'flex', fontSize: '25px', justifyContent: 'center'}}>检测站管理系统</Col>
                                <div style={{position: 'absolute', right: '0px', fontSize: '17px'}}>
                                    <span style={{marginRight: '20px'}}>欢迎<span
                                        style={{color: 'red',marginLeft:'15px'}}>{this.state.username}</span></span>
                                    <span className="exit" style={{marginRight: '20px'}} onClick={() => {
                                        this.handleExit()
                                    }}>退出</span>
                                </div>
                            </Row>
                        </Header>
                        <Content style={{background: '#fff', padding: 24, margin: 24}}>
                            <Switch>
                                {
                                    this.menuList.map((item, index) => {
                                        return <Route key={index} path={path + item.menu_path}
                                                                       component={item.component}/>
                                    })
                                }
                                {/*<Route path={path + '/home/customer'}*/}
                                       {/*component={Customers}/>*/}

                            </Switch>
                        </Content>
                    </Layout>
                </Layout>
            </span>
        )
    }

    // 跳转页面菜单的显示控制
    componentWillReceiveProps(props) {
        let tempPath = props.location.pathname;
    }

    componentDidMount() {
        window._this = this;
         let username = app.getData('site_name');
         this.setState({username});
    }

    handleMenuClick({key}) {
        app.scrollTop();
        window._this = this;

        let token = app.getToken();
        if (!token) {

        } else {
            this.setState({
                currentKey: key
            });
            app.setData('currentKey', key);
            this.props.history.push(key);
        }
    }

    // 点击退出按钮
    handleExit() {
        let _this = this;
        confirm(
            {
                title: '',
                content: '您确定要退出吗？',
                okText: '确定',
                cancelText: '取消',
                onOk() {
                    app.removeDate('site_id');

                    _this.props.history.push(path + "/sitelogins");
                },
                onCancel() {
                },
            });
    }
}

export default SiteHome;

